<!--
 * @Author: Even Liu
 * @Date: 2022-10-27 09:34:43
 * @LastEditors: Even Liu
 * @LastEditTime: 2022-11-14 13:35:37
 * @Description: file content
 * @FilePath: \ias_ui\src\views\coi\CBEC\components\detailPicture.vue
 * @Company: 沃尔玛
-->
<template>
  <div>
    <headline :headline="'商品详情页'">
      <span slot="head"><el-button type="text" @click="advertisingGuidelines">点击查看《沃尔玛大卖场电商商品详情页标准》</el-button></span>
    </headline>
    <el-form ref="ruleForm" class="detail-picture" :model="goodsInfo" size="mini" label-position="left">
      <el-form-item prop="skuContentResources" :rules="[{ validator: skuContentResourcesValid, trigger: 'blur' }]">
        <picture-upload
          :is-disabled="isDisabled"
          :file-list="goodsInfo"
          :path="'skuContentResources'"
          :pic-number="100"
          :pic-size="3"
          :multiple="true"
          :type="['jpg', 'jpeg']"
          :url-name="'resourceUrl'"
          :query-data="createQueryData()"
          :upload-data-key="uploadDataKey"
          :del-data-key="deleteDataKey"
          :del-fun="deleteFunction"
          :upload-fun="uploadFunction"
        />
      </el-form-item>
      <div class="gray">图片尺寸:宽 750px，仅支持JPG格式，详情页不能整张长图提交，需独立切片，单切片高度1000px，每张切片图不大于1MB</div>
      <div class="picList" v-html="content" />
      <special :is-disabled="isDisabled" :goods-info="goodsInfo" :placeholder="'请输入三品一械注册证编号'" />
    </el-form>
  </div>
</template>

<script>
import headline from '@/views/coi/components/headline.vue'
import pictureUpload from '../../components/pictureUpload.vue'
import special from '@/views/coi/making/special.vue'
import { uploadSkuContentResource, deleteSkuContentResource } from '@/api/coi/onlineTaskAPI/sku'
import { uploadSkuContentResource2, deleteSkuContentResource2 } from '@/api/coi/onlineTaskAPI/sku'
import { createPicDom } from '@/views/coi/commonJs/createPicDom.js'

const deleteParamKey1 = [
  { key: 'skuId', value: 'skuId' },
  { key: 'url', value: 'resourceUrl' }
]
const uploadParamKey1 = [
  { key: 'file', value: 'raw' },
  { key: 'skuId', value: 'skuId' }
]
const uploadParamKey2 = [
  { key: 'file', value: 'raw' },
  { key: 'processId', value: 'processId' },
  { key: 'channelId', value: 'channelId' },
  { key: 'resourceUrl', value: 'resourceUrl' },
  { key: 'resourceType', value: 'resourceType' }
]
const editParamKey = [
  { key: 'processId', value: 'processId' },
  { key: 'channelId', value: 'channelId' },
  { key: 'resourceUrl', value: 'resourceUrl' },
  { key: 'resourceType', value: 'resourceType' }
]
export default {
  components: {
    headline,
    pictureUpload,
    special
  },
  props: {
    isDisabled: {
      type: Boolean,
      default: true
    },
    goodsInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      uploadFunction: this.$route.params.type === 'add' ? uploadSkuContentResource : uploadSkuContentResource2,
      deleteFunction: this.$route.params.type === 'add' ? deleteSkuContentResource : deleteSkuContentResource2,
      uploadDataKey: this.$route.params.type === 'add' ? uploadParamKey1 : uploadParamKey2,
      deleteDataKey: this.$route.params.type === 'add' ? deleteParamKey1 : editParamKey,
      skuContentResourcesValid(rule, value, callback) {
        if (value?.length < 1) callback(new Error('商品详情页不能为空!'))
        else callback('')
      },
      skuId: this.$route.params.upc
    }
  },
  computed: {
    content() {
      return createPicDom(this.goodsInfo.skuContentResources, 'resourceUrl', true)
    }
  },
  methods: {
    createQueryData() {
      if (this.$route.params.type === 'add') {
        return { skuId: this.$route.params.upc }
      } else {
        return {
          resourceType: 1,
          processId: this.goodsInfo.processId,
          channelId: this.$route.query.channelId
        }
      }
    },
    advertisingGuidelines() {
      const guideBaseUrl = window.appConfig.operationGuideUrl
      window.open(`${guideBaseUrl}/display/PDF/沃尔玛大卖场商品详情页标准.pdf`)
    },
    submitForm() {
      let flag = null
      this.$refs.ruleForm.validate((valid) => {
        flag = valid
      })
      return flag
    }
  }
}
</script>

<style scoped lang="scss">
.form {
  margin: 0 10px;
  margin-top: 20px;
}
/deep/ .el-form-item__content {
  display: flex;
  align-items: center;
}
.gray {
  color: rgb(182, 182, 182);
}
</style>
